<template>
  <div>
    <div class="play-list-header">
      <div class="cover-wrap"><img :src="detail.coverImgUrl" width="100%"/></div>
      <div class="header-content">
        <div class="header-content-title">
          <div>
            <span class="list-icon">歌单</span>
            <span>{{detail.name}}</span>
          </div>
          <div class="header-count">
            <div>
              <span>歌曲数</span>
              <span>{{detail.trackCount}}</span>
            </div>
            <div>
              <span>播放量</span>
              <span>{{detail.playCount}}</span>
            </div>
          </div>
        </div>
        <div class="btn-group">
          <a-button type="danger" icon="play-circle">播放全部({{detail.trackCount}})</a-button>
          <a-button icon="star">收藏({{detail.subscribedCount}})</a-button>
          <a-button icon="share-alt">分享({{detail.shareCount}})</a-button>
        </div>

        <div class="header-desp">
          <div class="tags">
           标签： <a-tag :color="randomColor[i]"  v-for="(item, i) in detail.tags" :key="i">
              {{item}}
            </a-tag>
          </div>
          <div class="desp" :style="despHeight">{{detail.description}}</div>
          <div class="show-more">
            <a-button style="text-align: right" type="link" v-if="hiddenDesp" @click="despShowMore = !despShowMore">{{despShowMore ? '收起': '更多'}}</a-button>
          </div>

        </div>
      </div>
    </div>
    <div class="play-list-content">
      <div :class="['list-content-title', i === selectItem ? 'selected': '']" v-for="(item, i) in listContentTitle" :key="i" @click="selectItem = i">{{item.name}}</div>
      <keep-alive>
        <component :is="listContentTitle[selectItem].component" :songIds="songIds"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  import {randomChoice} from '@/assets/utils/index'

  export default {
    name: 'playListDetail',
    props: {
      detail: {
        type: Object,
        required: true
      }
    },
    computed:{
      // 是否要隐藏描述文本 (文本长度超过300)
      hiddenDesp(){
        if(this.detail.description){
          return this.detail.description.length > 300
        }
        return false
      },
      // 展开、收起文本时的高度
      despHeight(){
        if(this.despShowMore){
          return {'height': 'auto'}
        }
        return {'height': '66px',
        'display': '-webkit-box',
        '-webkit-box-orient': 'vertical',
        '-webkit-line-clamp': 3}
      },
      listContentTitle(){
        const pl = '评论(' + this.detail.commentCount + ')'
        return [{name: '歌曲列表', component: 'musicList'}, {name: pl, component: 'commentList'}, {name: '收藏者', component: 'starPersonList'}]
      },
      // 标签随机颜色
      randomColor(){
        const colorArr = ['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple']
        return randomChoice(colorArr, this.detail.tags.length)
      },
      // trackids 歌曲ids
      songIds(){
        return this.detail.trackIds.map(item => item.id)
      }
    },
    data(){
      return {
        despShowMore: false,
        selectItem: 0,  // 选中项，默认第一个
      }
    },
    methods:{
    }
  }
</script>

<style lang="scss" scoped>
  .play-list-header::after{
    content: '';
    clear: both;
  }
  .cover-wrap{
    width: 250px;
    height: 250px;
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
  }
  .header-content{
    min-height: 260px;
    overflow-y: hidden;
    .header-content-title{
      font-size: 18px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      .header-count{
        font-size: 14px;
        display: flex;
        span{
          display: block;
          text-align: center;
          margin-left: 15px;
        }
      }
    }
    .btn-group{
      margin-bottom: 20px;
    }
    .tags{
      margin-bottom: 10px;
    }
    .header-desp .desp {
        overflow: hidden;
    }
    .show-more {
      text-align: right;
    }
  }
  .list-icon{
    width: 45px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid red;
    color: red;
    user-select: none;
  }
  .play-list-content{
    .list-content-title{
      width: 100px;
      height: 35px;
      text-align: center;
      line-height: 35px;
      cursor: pointer;
      font-size: 14px;
      box-sizing: border-box;
      display: inline-block;
    }
    .selected {
      border-bottom: 3px solid rgb(255, 77, 79);
    }
  }
</style>
